<template>
  <div class="keep">
    <div class="photo">
      <img :src="$axios.defaults.baseURL+attention.head_img" />
    </div>
    <div class="title" v-if="attention.create_date">
      <div>{{attention.nickname}}</div>
      <div>{{attention.create_date.split('T')[0]}}</div>
    </div>
    <div class="Btn">
      <button @click="Btn" v-if="attention.show"  class="Btns">取消关注</button>
      <button @click="Btn1" v-else  class="BtnS">关注</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["attention", "index"],
  data() {
    return {
      data: []
    };
  },

  methods: {
    Btn() {
      this.$dialog
        .confirm({
          message: "是否取消关注"
        })
        .then(() => {
          this.$axios({
            url: "/user_unfollow/" + this.attention.id,
            method: "get"
          }).then(res => {
            this.attention.show = false;
            // console.log(this.attention.show);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    Btn1() {
      this.$axios({
        url: "/user_follows/" + this.attention.id,
        method: "get"
      }).then(res => {
        this.attention.show = true;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.keep {
  //   margin-top: 20px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  padding: 20px;
  display: flex;
  .photo {
    width: 40px;
    height: 40px;

    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }
  .title {
    flex: 1;
    margin-left: 15px;
  }
  .Btn {
    position: absolute;
    right: 15px;

    margin-top: 10px;
    button {
      //   color: red;
      width: 70px;
      height: 28px;
      border-radius: 7px;
      font-size: 12px;
      outline: none;
      border: none;
    }
  }
  .BtnS{
    background: red;
    color: #fff;
  }
}
</style>
